<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>图书管理系统</title>
        <!-- Bootstrap 3.3.7 css 文件 -->
        <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
        <!-- jQuery 1.9.1 -->
        <script src="https://cdn.staticfile.org/jquery/1.9.1/jquery.min.js"></script>
        <!-- Bootstrap 3.3.7 js 文件 -->
        <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
        <style>
            .search {
                margin-bottom: 30px;
            }
        </style>
    </head>
    <body>
    {# 导航栏 #}
    <nav class="navbar navbar-default" role="navigation">
        <!-- 导航栏 -->
        <div class="container">
            <!-- 导航栏左边 -->
            <div class="navbar-header">
                <a href="/" class="navbar-brand">起丶中文网</a>
            </div>
            <!-- 导航栏右边 -->
            <div>
                <ul class="nav navbar-nav navbar-right category">
                    <li class="active" data-category="全部"><a href="/">全部</a></li>
                    <li data-category="小说"><a href="/小说/">小说</a></li>
                    <li data-category="童话"><a href="/童话/">童话</a></li>
                    <li data-category="杂志"><a href="/杂志/">杂志</a></li>
                    <li data-category="漫画"><a href="/漫画/">漫画</a></li>
                    <li data-category="教辅工具"><a href="/教辅工具/">教辅工具</a></li>
                </ul>
            </div>
        </div>
    </nav>

    {# 主体内容 #}
    <div class="container">
        {#  左侧列表组  #}
        <div class="col-md-2">
            <ul class="list-group">
                <a href="/">
                    <li class="list-group-item active">全部</li>
                </a>
                <a href="/小说/">
                    <li class="list-group-item">小说</li>
                </a>
                <a href="/童话/">
                    <li class="list-group-item">童话</li>
                </a>
                <a href="/杂志/">
                    <li class="list-group-item">杂志</li>
                </a>
                <a href="/漫画/">
                    <li class="list-group-item">漫画</li>
                </a>
                <a href="/教辅工具/">
                    <li class="list-group-item">教辅工具</li>
                </a>
            </ul>
        </div>

        {#  右侧面板数据  #}
        <div class="col-md-10">
            {#  面板  #}
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3>{{ category }}书籍</h3>
                </div>
                <div class="panel-body">
                    {#   表格   #}
                    <table class="table table-striped table-hover">
                        <thead>
                        <tr>
                            <th>书名</th>
                            <th>作者</th>
                            <th>出版社</th>
                            <th>分类</th>
                            <th>类型</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for book in books_data %}
                            <tr>
                                <td>《{{ book.get('book_name') }}》</td>
                                <td>{{ book.get('author', '/') }}</td>
                                <td>{{ book.get('public') }}</td>
                                <td>{{ book.get('category') }}</td>
                                <td>{{ book.get('book_type') }}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    </body>
</html>